<template>
  <div class="caidan_box">
    <swiper class="caidan_box_swiper" :options="swiperOption">
      <swiper-slide v-for="(page,index) of pages" :key="index">
        <ul class="caidan_ul">
          <li class="caidan_li" v-for="item of page" :key="item.id">
            <img class="slide_img" :src="item.imgUrl" alt />
            <p class="slide_p">{{item.name}}</p>
          </li>
        </ul>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  props:{
    CaidanList:Array
  },
  data() {
    return {
      swiperOption:{
        autoplay:false //这是说菜单不让其自己滚动，只能手动滑动。
      }
      // 循环菜单的图片
      // CaidanList: [
      //   {
      //     id: "01",
      //     imgUrl:
      //       "https://imgs.qunarzz.com/vs_ceph_vs_tts/709b13cf-820e-4139-999f-498ad9045567.jpg_r_390x260x90_49b4fd90.jpg",
      //     name: "菜单1"
      //   },
      //   {
      //     id: "02",
      //     imgUrl:
      //       "https://imgs.qunarzz.com/vs_ceph_vs_tts/709b13cf-820e-4139-999f-498ad9045567.jpg_r_390x260x90_49b4fd90.jpg",
      //     name: "菜单2"
      //   },
      //   {
      //     id: "03",
      //     imgUrl:
      //       "https://imgs.qunarzz.com/vs_ceph_vs_tts/709b13cf-820e-4139-999f-498ad9045567.jpg_r_390x260x90_49b4fd90.jpg",
      //     name: "菜单3"
      //   },
      //   {
      //     id: "04",
      //     imgUrl:
      //       "https://imgs.qunarzz.com/vs_ceph_vs_tts/709b13cf-820e-4139-999f-498ad9045567.jpg_r_390x260x90_49b4fd90.jpg",
      //     name: "菜单4"
      //   },
      //   {
      //     id: "05",
      //     imgUrl:
      //       "https://imgs.qunarzz.com/vs_ceph_vs_tts/709b13cf-820e-4139-999f-498ad9045567.jpg_r_390x260x90_49b4fd90.jpg",
      //     name: "菜单5"
      //   },
      //   {
      //     id: "06",
      //     imgUrl:
      //       "https://imgs.qunarzz.com/vs_ceph_vs_tts/709b13cf-820e-4139-999f-498ad9045567.jpg_r_390x260x90_49b4fd90.jpg",
      //     name: "菜单6"
      //   },
      //   {
      //     id: "07",
      //     imgUrl:
      //       "https://imgs.qunarzz.com/vs_ceph_vs_tts/709b13cf-820e-4139-999f-498ad9045567.jpg_r_390x260x90_49b4fd90.jpg",
      //     name: "菜单7"
      //   },
      //   {
      //     id: "08",
      //     imgUrl:
      //       "https://imgs.qunarzz.com/vs_ceph_vs_tts/709b13cf-820e-4139-999f-498ad9045567.jpg_r_390x260x90_49b4fd90.jpg",
      //     name: "菜单8"
      //   },
      //   {
      //     id: "09",
      //     imgUrl:
      //       "https://imgs.qunarzz.com/vs_ceph_vs_tts/709b13cf-820e-4139-999f-498ad9045567.jpg_r_390x260x90_49b4fd90.jpg",
      //     name: "菜单9"
      //   },
      //    {
      //     id: "10",
      //     imgUrl:
      //       "https://imgs.qunarzz.com/vs_ceph_vs_tts/709b13cf-820e-4139-999f-498ad9045567.jpg_r_390x260x90_49b4fd90.jpg",
      //     name: "菜单10即可将大家 发的发的是"
      //   }
      // ]
    };
  },
//   计算属性,自带缓存，计算简单
computed:{
    // 先定义一个pages数据
    pages (){
        // 定义数组
        const pages=[]
        // 循环CaidanList ，菜单栏若是除以8最后余数是0，代表是第一页，若是1则代表是第二页。
        // forEach 一个是循环的项，一个是循环项的下标。
        this.CaidanList.forEach((item,index)=>{
            const page=Math.floor(index/8)
            // pages不存在的时候,让它为一个空数组
            if (!pages[page]) {
                pages[page]=[]
            }
            // 添加到相对应的页码中
            pages[page].push(item)
        })
        // return出去,记得这个可以看vue的chorme的数据，这里是return的是pages
        return pages

    }
}

};
</script>

<style lang="stylus" scoped>
@import '~styles/common';
.caidan_box >>> .swiper-container{
     height:3rem;
  overflow: hidden;
}
.caidan_box {
  height:3rem;
  overflow: hidden;
  margin: 0.3rem 0;

  .slide_img {
    display: block;
    width: 1rem;
    height: 1rem;
    border: 1px solid red;
  }

  .slide_p {
    color: red;
    danhang()
  }
  .caidan_ul{
      display:flex;
      flex-wrap:wrap;
      .caidan_li{
          width:25%;
          margin-top:.12rem
      }
  }
}
</style>
